<style lang=less scoped>
	@import "../../variables.less";

	.index {
		position: absolute;
		top: 0;
		right: 20px;
		bottom: 20px;
		width: 100%;
	}

	.energyRoot {
		height: 100%;
	}
</style>
<template>
	<div class="energyRoot">
		<FloorSelector :dataset="floors" style="position: absolute;left: 80px;bottom:20px;pointer-events: all" />
		<RouterView class="index" />
	</div>
</template>

<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";
	import request from "@/request";
	import FloorSelector from "@/components/floorSelector/floorSelector.vue";

	@Component({
		components: { FloorSelector }
	})
	export default class EnergyRoot extends Vue {
		floors:{ name:string, id:string }[] = [];

		mounted () {
			request({
				url: "/space/floor/",
				params: {
					facility: 1
				}
			}).then(({ data }) => {
				this.floors = (data as { name:string, id:string }[]).reverse().map((t) => ({
					name: t.name,
					id: t.id
				}));
			});
		}
	}

</script>
